<script setup>
import MyInput from "@/components/MyInput/MyInput.vue";
import MySelection from "@/components/MySelection/MySelection.vue";
import { onMounted, ref, watch, computed } from "vue";
import MYCascader from "@/components/MYCascader/MYCascader.vue";
import bus from "@/utils/bus";
import ueMsg from "/public/js/app.js";
import api from "@/api";
import { useParamsStore } from "@/stores/params.js";

const paramsStore = useParamsStore();
const treeData = computed(() => paramsStore.treeData);

const param = ref([]);
const searchIpt = ref("");
const list = ref([]);
const warningLive = ref([
  { value: "一级告警", label: "一级告警" },
  { value: "二级告警", label: "二级告警" },
  { value: "三级告警", label: "三级告警" },
  { value: "四级告警", label: "四级告警" },
]);
const warningType = ref([
  { value: "U位告警", label: "U位告警" },
  { value: "动环告警", label: "动环告警" },
  { value: "故障告警", label: "故障告警" },
]);
const showCart = ref(false);
const searchWarningLive = ref("");
const searchWarningType = ref("");
const searchCascader = ref("");
const style_grade = (grade) => {
  const test = {
    一级告警: "#E94423",
    二级告警: "#E9A123",
    三级告警: "#23DDE9",
  };
  return test[grade] ? test[grade] : "#fff";
};
const style_state = (state) => {
  if (state === "解除") {
    return "#E94423";
  } else {
    return "#1979BD";
  }
};
const searshList = ref([]);

const total = ref(0);
const pages = ref({
  size: 10,
  current: 1,
});

const dataInit = async () => {
  const res = await api.alarmList(pages.value);
  list.value = res.data.records;
  total.value = res.data.total;
  searshList.value = res.data.records;
  ueMsg.apiSend({ AlarmList: res });
};

const GjCard = (item) => {
  if (!showCart.value) {
    showCart.value = true;
  }
  bus.emit("GjCard", { item: item, showCart: showCart.value });
};

onMounted(() => {
  dataInit();
});

watch(
  () => searchIpt.value,
  (newVal) => {
    if (newVal) {
      const lowerCaseQuery = newVal.toLowerCase();
      searshList.value = list.value.filter((item) => {
        return item.alarmDesc.toLowerCase().includes(lowerCaseQuery);
      });
    } else {
      searshList.value = list.value;
    }
  }
);

const handValu1 = (value) => {
  searchWarningLive.value = value;
};
const handValu2 = (value) => {
  searchWarningType.value = value;
};
const handValu3 = (value) => {
  searchCascader.value = value[value.length - 1];
};
watch(
  () => searchWarningLive.value,
  (newVal) => {
    pages.value.alarmLevel = newVal;
    dataInit();
  }
);

watch(
  () => searchWarningType.value,
  (newVal) => {
    pages.value.alarmType = newVal;
    dataInit();
  }
);

watch(
  () => searchCascader.value,
  (newVal) => {
    pages.value.addressId = newVal;
    dataInit();
  }
);
</script>

<template>
  <div class="Gj-frame com-flex-c com-center">
    <div class="select">
      <MYCascader :list="treeData" @value1="handValu3"></MYCascader>
    </div>
    <div class="select">
      <MyInput v-model="searchIpt" placeholder="查询当前层级下的孪生体" />
    </div>
    <div class="line"></div>
    <div class="select-two com-flex-r">
      <div class="all-select">
        <MySelection :list="warningLive" @value1="handValu1" />
      </div>
      <div class="all-select">
        <MySelection :list="warningType" @value1="handValu2" />
      </div>
    </div>
    <div class="warn-frame com-flex-c">
      <div
        v-for="(item, index) in searshList"
        :key="index"
        class="warn-grade com-flex-c com-center"
      >
        <div class="line"></div>
        <div class="text-top com-flex-r" @click="GjCard(item)">
          <div class="top-left com-flex-r com-center-c">
            <img class="imgs" src="/imgs/23.png" />
            <span class="grade" :style="{ color: style_grade(item.alarmLevel) }">
              {{ item.alarmLevel }}
            </span>
            <div class="dian"></div>
            <div class="name">{{ item.alarmType }}</div>
          </div>
          <div class="state" :style="{ color: style_state(item.grade) }">
            {{ item.state }}
          </div>
        </div>
        <div class="text-bottom com-flex-r">
          <div class="text">
            {{ item.alarmDesc }}
          </div>
          <span class="time">{{ item.alarmTime }}</span>
        </div>
      </div>
    </div>
    <div class="com-flex-c" style="pointer-events: all">
      <a-pagination
        v-model:current="pages.current"
        :pageSize="pages.size"
        :total="total"
        @change="dataInit"
        :showSizeChanger="false"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Gj-frame {
  width: 600px;
  height: 95%;
  background: url(/imgs/25.png);
  background-size: auto 100%;
  background-repeat: no-repeat;

  .select {
    margin: 1% 0;
    justify-content: space-between;
    width: 85%;
    height: 50px;
    .tree-select {
      width: 100%;
      height: 100%;
      pointer-events: all;
    }
    .dot-name {
      font-size: calc(var(--fs) * 0.95);
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #fefeff;
    }
  }

  .line {
    margin: 3% 0;
    width: 85%;
    height: 3px;
    background: linear-gradient(
      to left,
      transparent,
      rgba(129, 177, 244, 0.37),
      transparent
    );
  }

  .select-two {
    justify-content: space-between;
    width: 85%;
    height: 50px;

    .all-select {
      width: 48%;
      height: 100%;
    }
  }

  .warn-frame {
    margin-top: 4%;
    width: 85%;
    height: 60%;
    overflow-y: auto;
    pointer-events: all;

    .warn-grade {
      justify-content: space-evenly;
      position: relative;
      margin-bottom: 5px;
      width: 100%;
      height: 150px;
      background: rgba(67, 77, 98, 0.14);
      border-radius: 4px;
      padding: 10px 0;
      .line {
        position: absolute;
        left: 1%;
        top: 5%;
        width: 3px;
        height: 70px;
        background: #1979bd;
      }

      .grade {
        margin: 0 2%;
        font-size: var(--fs);
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
      }

      .text-top {
        width: 90%;

        .top-left {
          width: 80%;
          color: #fff;
        }
      }

      .imgs {
        width: 30px;
        height: 30px;
      }

      .dian {
        width: 8px;
        height: 8px;
        background: #ffffff;
        border-radius: 50%;
        margin: 0 5%;
      }

      .state {
        font-size: calc(var(--fs) * 0.87);
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #1979bd;
      }

      .text {
        width: 240px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: calc(var(--fs) * 0.7);
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #feffff;
      }

      .time {
        font-size: calc(var(--fs) * 0.7);
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b5c4d0;
      }
    }
  }

  .total {
    width: 85%;
    font-size: calc(var(--fs) * 0.7);
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #b5c4d0;
  }
}
</style>
